/**
 *  统计图表
 *  Created by longgs on 2018/7/19.
 */



'use strict';
angular.module("MetronicApp").directive('statistic', function () {
    return {
        scope: {
            id: "@",
            data: "="
        },
        restrict: 'EA',
        template: '',
        replace: true,
        link: function ($scope, element, attrs, controller) {
            function getOption(data) {
                var option = {


                    grid: {
                        left: '3%',
                        right: '0%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['企业基本信息模型', '总量计算模型', '大气排放模型', '监督执法模型', '企业信用模型', '行业类别模型'],
                            // 控制网格线是否显示
                            splitLine: {
                                show: false,   // 网格线是否显示
                                //  改变样式
                                lineStyle: {
                                    color: '#f00'   // 修改网格线颜色
                                }
                            },
                            //  隐藏坐标轴
                            axisLine: {
                                show: false
                            },
                            // 去除坐标轴上的刻度线
                            axisTick: {
                                show: false
                            }
                        }
                    ],
                    yAxis: [
                        {
                            show: true,
                            type: 'value',
                            min: 0,
                            max: 100,
                            splitNumber: 5,
                            interval: 25,
                            name: '( % )',
                            splitLine: {
                                show: true,   // 网格线是否显示
                                //  改变样式
                                lineStyle: {
                                    color: '#CCCC99'   // 修改网格线颜色
                                }
                            },
                            //  隐藏坐标轴
                            axisLine: {
                                show: false
                            },
                            // 去除坐标轴上的刻度线
                            axisTick: {
                                show: false
                            }

                        }
                    ],
                    series: [
                        {
                            type: 'bar',
                            barWidth: '35%',
                            data: [90, 75, 80, 70, 90, 98],
                            center: ['60%','80%'],
                            itemStyle: {
                                normal: {
                                    color: '#FF9999',
                                    barBorderRadius: 5,
                                    label: {
                                        show: true,
                                        position: 'top',
                                        formatter: function (param) {

                                            return param.value + '%';

                                        },
                                        textStyle: {fontSize: 18, color: "#000000"}
                                    }
                                }
                            }

                        }
                    ]

                };
                return option;
            }

            var myChart = echarts.init(document.getElementById('third'), 'macarons');
            myChart.setOption(getOption($scope.data));

            $scope.$watch('data', function (newVal, oldVal) {
                myChart.setOption(getOption(newVal));
            });
        }
    };
});
